﻿@model int?
@using CAF.Infrastructure.Core;
@using CAF.WebSite.Application.WebUI.UI;
@using CAF.Infrastructure.Core.Utilities;
@functions {
    private bool TransientUpload
    {
        get
        {
            if (ViewData.ContainsKey("transientUpload"))
            {
                var x = ViewData["transientUpload"].Convert<bool>();
                return x;
            }
            return false;
        }
    }
}
@{
    var random = CommonHelper.GenerateRandomInteger();
    var clientId = "picture" + random;
    var pictureService = EngineContext.Current.Resolve<CAF.WebSite.Application.Services.Media.IPictureService>();
    int pictureId = Model.HasValue ? Model.Value : 0;
    var picture = pictureService.GetPictureById(pictureId);

    //Html.AddScriptParts("~/bundles/fileupload");
    //Html.AddCssFileParts("~/css/fileupload");
}
<div id="@clientId" class="fileupload" style="display: inline-block;" data-upload-url='@Url.Action("AsyncUpload", "Picture", new { isTransient = TransientUpload, area = "Seller" })'>

    @Html.HiddenFor(x => x, new { @class = "hidden" })
    <img src="@(pictureService.GetPictureUrl(pictureId, 100,100, true))" class="img-polaroid" alt="" />
    <button class="btn remove" @Html.Attr("style", "display:none", picture == null)>
        <i class="fa fa-trash-o"></i>
        @T("Seller.Picture.RemovePicture")
    </button>
    <span class="btn btn-primary fileinput-button">
        <i class="fa fa-upload"></i>
        <span>@T("Common.Fileuploader.Upload")</span>
        <input id="fileupload-@random" type="file" name="file" />
    </span>
    <button class="btn btn-warning cancel">
        <i class="fa fa-times"></i>
        <span>@T("Common.Fileuploader.Cancel")</span>
    </button>
    <!-- The global progress information -->
    <div class="span5 fileupload-progress fade">
        <!-- The global progress bar -->
        <div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
            <div class="bar" style="width:0%;"></div>
        </div>
        <!-- The extended global progress information -->
        <div class="progress-extended">&nbsp;</div>
    </div>
</div>
<script type="text/javascript">

    $(function () {

        var el = $('#@clientId'),
            img = el.find('img'),
            elHidden = el.find('.hidden'),
            elRemove = el.find('.remove');

        $('#@clientId').fileupload({
            url: el.data('upload-url'),
            dataType: 'json',
            //acceptFileTypes: /^image\/(gif|jpeg|jpg|png)$/,
            acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,

            done: function (e, data) {
                var result = data.result;
                if (result.success) {
                    img.attr('src', result.imageUrl);
                    elHidden.val(result.pictureId);
                    elRemove.show();
                }
            },

            error: function (jqXHR, textStatus, errorThrown) {
                if (errorThrown === 'abort') {
                    //alert('File Upload has been canceled');
                }
            }
        });

        elRemove.click(function (e) {
            img.attr('src', '@pictureService.GetDefaultPictureUrl()');
            elHidden.val(0);
            $(this).hide();
            e.preventDefault();
        });

    });

</script>
